<template>
  <el-menu
    :default-active="$route.path"
    router
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :collapse-transition="true"
  >
    <el-menu-item v-for="item,index in menus" :key="index" :index="item.path">
      <el-icon><icon-menu /></el-icon>
      <template #title>
        <span>{{ item.name }}</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { defineProps } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting
} from '@element-plus/icons-vue'

const props = defineProps(['isCollapse'])

const menus = [
  {
    path: '/',
    name: 'home'
  },
  {
    path: '/Hello',
    name: 'hello'
  },
  {
    path: '/CombinedAPI',
    name: 'combinedAPI'
  },
  {
    path: '/Computed',
    name: 'computed'
  },
  {
    path: '/class-and-style',
    name: 'classAndStyle'
  },
  {
    path: '/list-render',
    name: 'listRender'
  },
  {
    path: '/lifeCycle',
    name: 'lifeCycle'
  },
  {
    path: '/watch',
    name: 'watch'
  },
  {
    path: '/template-refs',
    name: 'templateRefs'
  },
  {
    path: '/componentBasic',
    name: 'componentBasic'
  },
  {
    path: '/componentVmodel',
    name: 'componentVmodel'
  },
  {
    path: '/ComponentSlot',
    name: 'componentSlot'
  },
  {
    path: '/dependency-inversion',
    name: 'dependencyInversion'
  },
  {
    path: '/custom-directives',
    name: 'customDirectives'
  },
  {
    path: '/plugins',
    name: 'plugins'
  },
  {
    path: '/transition',
    name: 'transition'
  },
  {
    path: '/transition-group',
    name: 'transitionGroup'
  },
  {
    path: '/keep-alive',
    name: 'keepAlive'
  },
  {
    path: '/animation',
    name: 'animation'
  },
  {
    path: '/accordion',
    name: 'accordion'
  },
]

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
